<template>
  <base-layout>
    <div class="course-edit">
      <a-card title="编辑课程" :bordered="false">
        <template #extra>
          <a-button @click="handleBack">
            <template #icon><arrow-left-outlined /></template>
            返回
          </a-button>
        </template>
        <a-form
          :model="formState"
          :rules="rules"
          ref="formRef"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item label="课程名称" name="name">
            <a-input v-model:value="formState.name" placeholder="请输入课程名称" />
          </a-form-item>

          <a-form-item label="课程代码" name="code">
            <a-input v-model:value="formState.code" placeholder="请输入课程代码" />
          </a-form-item>

          <a-form-item label="学期" name="semester">
            <a-select v-model:value="formState.semester" placeholder="请选择学期">
              <a-select-option value="2024-1">2024春季学期</a-select-option>
              <a-select-option value="2023-2">2023秋季学期</a-select-option>
              <a-select-option value="2023-1">2023春季学期</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="课程类型" name="type">
            <a-select v-model:value="formState.type" placeholder="请选择课程类型">
              <a-select-option value="required">必修课</a-select-option>
              <a-select-option value="elective">选修课</a-select-option>
              <a-select-option value="practice">实践课</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="学分" name="credit">
            <a-input-number
              v-model:value="formState.credit"
              :min="0.5"
              :max="10"
              :step="0.5"
              placeholder="请输入学分"
            />
          </a-form-item>

          <a-form-item label="参与班级" name="classes">
            <a-select
              v-model:value="formState.classes"
              mode="multiple"
              placeholder="请选择参与班级"
              style="width: 100%"
              :options="classOptions"
            />
          </a-form-item>

          <a-form-item label="上课时间" name="schedule">
            <a-space direction="vertical" style="width: 100%">
              <a-checkbox-group v-model:value="formState.schedule">
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="monday">周一</a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="tuesday">周二</a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="wednesday">周三</a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="thursday">周四</a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="friday">周五</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
              <a-time-picker v-model:value="formState.time" format="HH:mm" />
            </a-space>
          </a-form-item>

          <a-form-item label="课程简介" name="description">
            <a-textarea
              v-model:value="formState.description"
              placeholder="请输入课程简介"
              :rows="4"
            />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
            <a-space>
              <a-button type="primary" @click="handleSubmit">保存</a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </base-layout>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import BaseLayout from '@/components/layout/BaseLayout.vue'

const router = useRouter()
const route = useRoute()
const formRef = ref()
const formState = reactive({
  name: '',
  code: '',
  semester: undefined,
  type: undefined,
  credit: 2,
  classes: [],
  schedule: [],
  time: null,
  description: ''
})

const rules = {
  name: [
    { required: true, message: '请输入课程名称', trigger: 'blur' },
    { min: 2, max: 50, message: '课程名称长度应在 2-50 个字符之间', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入课程代码', trigger: 'blur' },
    { pattern: /^[A-Z0-9]{4,10}$/, message: '课程代码应为4-10位大写字母和数字', trigger: 'blur' }
  ],
  semester: [
    { required: true, message: '请选择学期', trigger: 'change' }
  ],
  type: [
    { required: true, message: '请选择课程类型', trigger: 'change' }
  ],
  credit: [
    { required: true, message: '请输入学分', trigger: 'change' }
  ],
  classes: [
    { required: true, type: 'array', message: '请选择参与班级', trigger: 'change' }
  ],
  schedule: [
    { required: true, type: 'array', message: '请选择上课时间', trigger: 'change' }
  ],
  time: [
    { required: true, message: '请选择上课时间', trigger: 'change' }
  ]
}

// 班级选项数据
const classOptions = [
  { value: '1', label: '软件工程2023-1班' },
  { value: '2', label: '软件工程2023-2班' },
  { value: '3', label: '计算机科学2023-1班' },
  { value: '4', label: '计算机科学2023-2班' }
]

// 获取课程信息
const fetchCourseInfo = async (id) => {
  try {
    // 模拟API调用
    const mockData = {
      name: '软件工程实践',
      code: 'SE001',
      semester: '2024-1',
      type: 'required',
      credit: 3,
      classes: ['1', '2'],
      schedule: ['monday', 'wednesday'],
      time: null, // 需要转换为moment对象
      description: '这是一门软件工程实践课程'
    }
    Object.assign(formState, mockData)
  } catch (error) {
    message.error('获取课程信息失败')
  }
}

const handleSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('表单数据:', formState)
      message.success('保存成功')
      router.push('/course-manage')
    })
    .catch(error => {
      console.log('验证失败:', error)
    })
}

const handleReset = () => {
  formRef.value.resetFields()
}

const handleBack = () => {
  router.push('/course-manage')
}

onMounted(() => {
  const courseId = route.params.id
  if (courseId) {
    fetchCourseInfo(courseId)
  }
})
</script>

<style scoped>
.course-edit {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}
</style> 